<template>
  <div class="container">
     <div class="mainbody">
      <div class="title">注册</div>
        <div class="form">
            <el-form
              label-position="right"
              label-width="50px"
              :model="formLabelAlign"
              style="max-width: 300px;height: 85px;cursor: pointer;  caret-color: black; "
            >
              <el-form-item label="账号:">
                <el-input v-model="formLabelAlign.username" />
              </el-form-item>
              <el-form-item label="密码:">
                <el-input v-model="formLabelAlign.password" />
              </el-form-item>
            </el-form>
            <div style="font-size: 13px;padding-top:3px;padding-left: 200px; color: blue;" @click="toLogin">去登录</div>
       </div>
        <div style="margin-top: 10px;">
       <el-button style="color: white;font-size: 17px; border-radius: 20px;height: 35px;width: 120px; background: linear-gradient(90deg,#3cadeb,#9c88ff);"  @click="register">注册</el-button>
     </div>
    </div>
  </div>
</template>

<script>
// import api from "../api/index"
export default{
  data() {
    return {
      formLabelAlign:{
        username: '',
        password: ''
        }
    }
  },
  methods:{
    toLogin() {
      this.$router.push("/login")
    },

    register() {
      let formData = new FormData();
      formData.append('username', this.formLabelAlign.username);
      formData.append('password', this.formLabelAlign.password);
      console.log("formdata",formData);
      this.$store.dispatch('user/register',formData)
        .then(res => {
          console.log("后端返回")
          console.log(res)
          this.$message({
            type: "success",
            message: "注册成功"  
          })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "失败"
          })
        })
      }

  //  async register() {
  //     try {
  //       console.log(this.formLabelAlign.username,this.formLabelAlign.password);
  //     let formData = new FormData();
  //     formData.append('username', this.formLabelAlign.username);
  //     formData.append('password', this.formLabelAlign.password);
  //     const params =formData;
  //       const response = await api.register(params);

  //       console.log("成功",response);
  //       this.$message({
  //         message:"注册成功",
  //         type:'success'
  //         })

  //     } catch (error) {
  //       // 处理登录失败后的逻辑

  //       console.error("报错",error);
  //       this.$message({
  //         message:"失败",
  //         type:'error'
  //         })
  //     }
  //   }
  }
}

</script>

<style>
.container {
  width: 100vw;     /* 占满浏览器宽度 */
  height: 100vh;    /* 占满浏览器高度 */
  display: flex;
  background-color: rgb(139, 159, 234);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor:default;
  caret-color: transparent;
}   
.container .mainbody{
  width:400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  align-items: center;
  background-color: bisque;
}
.mainbody .title {
  width: 100px;
  height: 50px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  color: black;
}


.mainbody .form {
  width: 300px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>